<template>
  <ul>
    <li>
      <!--  @change="handleAllChange" -->
      <input type="checkbox" v-model="isAllChecked" />
      <span>全选/全不选</span>
    </li>
    <template v-if="dataList.length">
      <li v-for="(item, index) in dataList" :key="item.id">
        <div>
          <input type="checkbox" v-model="checkList" :value="item" />
        </div>
        <div>
          {{ item.title }}
        </div>
        <div>
          <img
            :src="item.poster"
            :alt="item.title"
            width="200px"
            height="100px"
          />
        </div>
        <div>¥{{ item.price }}</div>
        <div>
          <button @click="item.number--" :disabled="item.number <= 1">-</button>
          {{ item.number }}
          <button @click="item.number++" :disabled="item.number >= item.limit">
            +
          </button>
        </div>
        <div>
          <button @click="handleDel(index, item.id)">删除</button>
        </div>
      </li>
    </template>
    <li v-else="dataList.length">
      <span>购物车空空如也</span>
    </li>
    <li>
      <span>总金额:</span>
      <span>{{ sum }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          id: 1,
          title: "暴电熊",
          number: 1,
          poster:
            "https://pp3.oscaches.com/pp3/imgfile/20240131/31174911wms2.jpg",
          price: 199,
          limit: 4,
        },
        {
          id: 2,
          title: "捣蛋猫",
          number: 1,
          poster:
            "https://q7.itc.cn/images01/20240119/65ffbfce75f8404db1c0d111ceafd0c8.jpeg",
          price: 3,
          limit: 4,
        },
        {
          id: 3,
          title: "花冠龙",
          number: 1,
          poster:
            "https://p7.itc.cn/q_70/images03/20220915/c20512c1e75943aa938a41253f9c6fec.jpeg",
          price: 49,
          limit: 4,
        },
        {
          id: 4,
          title: "灌木羊",
          number: 1,
          poster:
            "https://nimg.ws.126.net/?url=http%3A%2F%2Fvideoimg.ws.126.net%2Fcover%2F20240118%2FIr8j1Rui4_cover.jpg&thumbnail=668y375&quality=95&type=jpg",
          price: 19,
          limit: 4,
        },
      ],
      checkList: [],
      // isAllChecked: false,
    };
  },

  methods: {
    handleDel(index, id) {
      this.dataList.splice(index, 1);
      this.checkList = this.checkList.filter((item) => item.id != id);
      this.handleItemChange();
    },
  },
  computed: {
    sum() {
      return this.checkList.reduce(
        (total, item) => total + item.price * item.number,
        0
      );
    },
    isAllChecked: {
      get() {
        return this.checkList.length === this.dataList.length;
      },
      set(checked) {
        this.checkList = checked ? this.dataList : [];
      },
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

ul {
  width: 800px;
  margin: 0 auto;
  /* min-height: 400px; */
  list-style: none;
  border: 2px solid black;
  padding: 10px;
}

ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #999;
  padding-top: 10px;
  padding-bottom: 10px;
}

ul li:first-child {
  justify-content: left;
  padding-top: 0px;
}

ul li:last-child {
  justify-content: left;
  padding-bottom: 0px;
  border-bottom: none;
}
</style>
